<template>
  <Layout title="备忘列表" :has-back="true" :has-tabbar="false" ref="layout">
    <view
      style="
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
      "
    >
      <view>
        <view style="display: flex; column-gap: 20rpx">
          <view style="flex: 1; min-width: 0">
            <u-button type="info" @click="datetimeSelect"
              ><text style="font-size: 40rpx"
                >日期选择: {{ dateRange }}</text
              ></u-button
            >
          </view>
          <view>
            <u-button type="error" @click="ignoreDatetime">
              <text style="font-size: 40rpx">忽略日期</text>
            </u-button>
          </view>
        </view>
        <u-calendar
          :show="calendar.show"
          mode="range"
          @confirm="calendarConfirm"
          @close="calendarClose"
          :show-confirm="true"
          :maxDate="maxDate"
          :minDate="minDate"
          :defaultDate="defaultDate"
          :monthNum="24"
          :allowSameDay="true"
        ></u-calendar>
        <u-form :labelStyle="{ fontSize: '40rpx' }">
          <u-form-item :label="null" label-width="0rpx">
            <u-radio-group v-model="formData.isComplete">
              <view style="display: flex; column-gap: 20rpx">
                <u-radio
                  v-for="(radio, index) of completeRadioList"
                  :key="index"
                  :label="radio.label"
                  :name="radio.name"
                  labelSize="40rpx"
                ></u-radio>
              </view>
            </u-radio-group>
          </u-form-item>
        </u-form>
      </view>
      <view style="margin-top: 20rpx">
        <u-button type="primary" @click="searchRefresh">
          <text style="font-size: 40rpx">筛选</text>
        </u-button>
      </view>
      <view
        style="margin-top: 20rpx; margin-bottom: 20rpx; flex: 1; min-height: 0"
      >
        <z-paging
          ref="paging"
          v-model="noteList"
          @query="search"
          :fixed="false"
          :auto="false"
        >
          <view style="border: 2rpx solid gray">
            <view
              v-for="note of noteList"
              :key="note.uuid"
              @tap="noteClick(note)"
              style="border: 2rpx solid gray; padding: 20rpx"
              hover-class="hoverClass"
            >
              <view
                style="display: flex; flex-direction: column; row-gap: 20rpx"
              >
                <view>提醒日期: {{ note.sendDatetime.split(" ")[0] }}</view>
                <view style="display: flex; column-gap: 20rpx"
                  ><text>完成情况: </text>
                  <u-tag
                    :type="getTag(note.isComplete).type"
                    :text="getTag(note.isComplete).text"
                    size="mini"
                  ></u-tag
                ></view>
                <view style="display: flex; column-gap: 20rpx">
                  <text>提醒内容:</text>
                  <text>{{ note.content.slice(0, 10) + "..." }}</text>
                </view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>
      <view>
        <u-button type="success" @click="create">
          <text style="font-size: 40rpx">创建</text>
        </u-button>
      </view>
    </view>
  </Layout>
</template>

<script>
import Layout from "@/pages/component/layout/index.vue";
import { getNoteByPagination } from "@/api/note";
import { getCurrentDatetime } from "@/api/datetime";
import dayjs from "dayjs";
import { showErrorToast } from "@/util/message";
import { getUserByAll } from "@/api/user";

export default {
  onLoad() {
    getUserByAll()
      .then((result) => {
        let allUser = result.data.list;
        let owner = allUser.find((user) => {
          return user.name === this.$store.state.name;
        });
        this.formData.userUuid = owner.uuid;
        getCurrentDatetime().then((currentDatetime) => {
          let nowDatetime = dayjs(currentDatetime.data.datetime);
          this.minDate = nowDatetime.subtract(1, "year").format("YYYY-MM-DD");
          this.maxDate = nowDatetime.add(1, "year").format("YYYY-MM-DD");
          this.defaultDate = nowDatetime.format("YYYY-MM-DD");
          this.formData.sendDatetimeRange = [nowDatetime.format("YYYY-MM-DD")];
          this.searchRefresh();
        });
      })
      .catch((error) => {
        showErrorToast(error);
      });
  },
  onShow() {
    if (this.firstFlag) {
      this.searchRefresh();
    }
  },
  components: {
    Layout,
  },
  data() {
    return {
      firstFlag: false,
      noteList: [],
      formData: {
        sendDatetimeRange: [],
        userUuid: "",
        isComplete: "",
      },
      completeRadioList: [
        {
          label: "忽略",
          name: "",
        },
        {
          label: "已完成",
          name: "1",
        },
        {
          label: "未完成",
          name: "2",
        },
      ],
      calendar: {
        show: false,
      },
      maxDate: "",
      minDate: "",
      defaultDate: "",
    };
  },
  computed: {
    dateRange() {
      if (this.formData.sendDatetimeRange.length === 0) {
        return "";
      } else if (this.formData.sendDatetimeRange.length === 1) {
        return this.formData.sendDatetimeRange[0];
      } else {
        return `${this.formData.sendDatetimeRange[0]} 至 ${this.formData.sendDatetimeRange[1]}`;
      }
    },
  },
  methods: {
    create() {
      uni.navigateTo({
        url: "/pages/note/create/index",
      });
      this.firstFlag = true;
    },
    getTag(isComplete) {
      if (isComplete === "1") {
        return {
          type: "success",
          text: "已完成",
        };
      } else if (isComplete === "2") {
        return {
          type: "error",
          text: "未完成",
        };
      }
    },
    async noteClick(note) {
      let noteJson = JSON.stringify(note);
      await uni.navigateTo({
        url: `/pages/note/detail/index?query=${noteJson}`,
      });
      this.firstFlag = true;
    },
    ignoreDatetime() {
      this.formData.sendDatetimeRange = [];
    },
    calendarClose() {
      this.calendar.show = false;
    },
    datetimeSelect() {
      this.calendar.show = true;
    },
    calendarConfirm(event) {
      if (event[0] === event[1]) {
        this.formData.sendDatetimeRange = [event[0]];
      } else {
        this.formData.sendDatetimeRange = [event[0], event[event.length - 1]];
      }
      this.calendarClose();
    },
    async searchRefresh() {
      this.$refs.paging.refresh();
    },
    async search(currentPage, pageSize) {
      let result = await getNoteByPagination({
        currentPage,
        pageSize,
        ...this.formData,
      });
      let list = result.data.list;
      this.$refs.paging.complete(list);
    },
  },
};
</script>

<style lang="scss" scoped>
.hoverClass {
  background-color: gray;
}
</style>
